<html>
  <head>
    <script type="module">
      import '../bundle.js';
    </script>
  </head>
  <body>
    <h3>
      This page is used to test Container Luigi CLient API functionalities for iframe
      based microfrontend
    </h3>
    <button id="btn-1">Send Custom Message to iFrame Container</button>
    <button id="update-ctx">Update Ctx</button>
    <span id="container-ctx" style="display: none"></span>
    <button id="update-view-url" type="button">Update viewUrl</button>
    <button id="update-token">Update Access Token</button>
    <button id="change-theme" type="button">Change Theme</button>
    <button id="change-locale" type="button">Change Locale</button>
    <button id="change-feature-toggle-list" type="button">
      Change Feature Toggle List
    </button>

    <div style="border: solid 1px blue; height: 400px">
      <!-- Luigi Container to test general functionality-->
      <luigi-container
        data-test-id="iframe-based-container-test"
        viewURL="./microfrontend.html"
        context='{"title": "Projects", "content":" "}'
        auth-data='{ "accessToken": "my-token" }'
        theme="sap_horizon_dark"
        locale="en"
        active-feature-toggle-list='["feature1", "feature2"]'
      ></luigi-container>
    </div>

    <script type="module">
      import Events from '../bundle.js';

      const luigiContainer = document.querySelector(
        '[data-test-id="iframe-based-container-test"]',
      );

      luigiContainer.searchParams = { search: 'param' };
      luigiContainer.pathParams = { path: 'param' };
      luigiContainer.nodeParams = { node: 'params' };

      luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, (event) => {
        console.log(event.detail);
        window.location.hash = event.detail.link;
        if (confirm('Do you want to leave this page?')) {
          window.location = event.detail.link;
        }
      });

      luigiContainer.addEventListener(Events.GO_BACK_REQUEST, (event) => {
        console.log(event.detail);
        alert(event.detail.goBackValue);
      });

      luigiContainer.addEventListener(Events.UPDATE_TOP_NAVIGATION_REQUEST, (event) => {
        alert('UPDATE_TOP_NAVIGATION_REQUEST event received');
      });

      luigiContainer.addEventListener(Events.CUSTOM_MESSAGE, (event) => {
        alert('Custom message received: ' + JSON.stringify(event.detail));
      });

      var alertSettings;

      // Some glue code
      const sendCustomMessageBtn = document.getElementById('btn-1');
      const updateContextButton = document.getElementById('update-ctx');
      const updateViewUrlButton = document.getElementById('update-view-url');
      const updateAccessTokenButton = document.getElementById('update-token');
      const changeThemeButton = document.getElementById('change-theme');
      const changeLocaleButton = document.getElementById('change-locale');
      const changeFeatureToggleListButton = document.getElementById(
        'change-feature-toggle-list',
      );

      changeThemeButton.addEventListener('click', () => {
        const newTheme =
          luigiContainer.theme === 'sap_horizon_dark'
            ? 'sap_horizon_light'
            : 'sap_horizon_dark';
        luigiContainer.setAttribute('theme', newTheme);
        luigiContainer.updateContext({ bla: 'blub' });
      });

      changeLocaleButton.addEventListener('click', () => {
        const newLocale = luigiContainer.locale === 'en' ? 'de' : 'en';
        luigiContainer.setAttribute('locale', newLocale);
        luigiContainer.updateContext({ bla: 'blub' });
      });

      changeFeatureToggleListButton.addEventListener('click', () => {
        const newFeatureToggleList =
          luigiContainer.activeFeatureToggleList.length === 2
            ? ['feature3']
            : ['feature1', 'feature2'];
        luigiContainer.setAttribute(
          'active-feature-toggle-list',
          JSON.stringify(newFeatureToggleList),
        );
        luigiContainer.updateContext({ bla: 'blub' });
      });
      // for testing send Custom message functionality
      sendCustomMessageBtn.addEventListener('click', () => {
        luigiContainer.sendCustomMessage('update', { dataToSend: 'some data' });
      });

      updateContextButton.addEventListener('click', () => {
        luigiContainer.updateContext({ myContext: 'some context data' });
        document.querySelector('#container-ctx').innerHTML = JSON.stringify(
          luigiContainer.context,
        );
      });

      updateViewUrlButton.addEventListener('click', () => {
        luigiContainer.updateViewUrl('/');
      });

      updateAccessTokenButton.addEventListener('click', () => {
        luigiContainer.setAttribute('auth-data', '{"accessToken": "updated token"}');
      });

      const showAnAlert = (alertSettings) => {
        var popup = document.createElement('div');
        var text = document.createTextNode(alertSettings.settings.text);
        popup.appendChild(text);

        var dismissButton = document.createElement('BUTTON');
        if (alertSettings.settings.notifyAlertClosed) {
          var buttonText = document.createTextNode('Close Alert using notifyAlertClosed');
        } else {
          var buttonText = document.createTextNode('Close Alert');
        }
        dismissButton.addEventListener('click', () => {
          console.log(
            'Dismiss clicked core side. Sending close message to mf of id =',
            alertSettings.settings.id,
          );
          if (alertSettings.settings.notifyAlertClosed) {
            luigiContainer.notifyAlertClosed(
              alertSettings.settings.id,
              'neverShowItAgain',
            );
          } else {
            luigiContainer.closeAlert(alertSettings.settings.id, 'neverShowItAgain');
          }
          popup.style.display = 'none';
        });
        dismissButton.appendChild(buttonText);
        popup.appendChild(dismissButton);

        popup.style.visibility = 'visible';
        popup.id = 'pop';
        document.getElementsByTagName('body')[0].appendChild(popup);
        return dismissButton;
      };

      luigiContainer.addEventListener(Events.ALERT_REQUEST, (event) => {
        console.log('params:', Events.ALERT_REQUEST, event);
        console.log('payload', event.payload);
        alert('show-alert-request message received: ' + JSON.stringify(event.detail));
        console.log(event.detail.data.data);
        alertSettings = event.detail.data.data;

        if (alertSettings?.settings?.text !== 'Callback Test') {
          showAnAlert(alertSettings);
        } else {
          event.callback(true);
        }
      });

      luigiContainer.addEventListener(Events.ADD_SEARCH_PARAMS_REQUEST, (event) => {
        console.log('params:', Events.ADD_SEARCH_PARAMS_REQUEST, event);
        alert(
          'add-search-params-request message received: ' + JSON.stringify(event.detail),
        );
      });

      luigiContainer.addEventListener(Events.ADD_NODE_PARAMS_REQUEST, (event) => {
        console.log(Events.ADD_NODE_PARAMS_REQUEST, event);
        alert(
          'add-node-params-request message received: ' + JSON.stringify(event.detail),
        );
      });

      luigiContainer.addEventListener(Events.SHOW_CONFIRMATION_MODAL_REQUEST, (event) => {
        console.log(Events.SHOW_CONFIRMATION_MODAL_REQUEST, event);
        const data = event.detail;
        const val = confirm(data.body);
        alert('show-confirmation-modal message received: ' + JSON.stringify(data));

        if (data?.data?.data?.settings?.header !== 'Callback Test') {
          luigiContainer.notifyConfirmationModalClosed(val);
        } else {
          event.callback(true);
        }
      });

      luigiContainer.addEventListener(Events.SHOW_LOADING_INDICATOR_REQUEST, (event) => {
        console.log(Events.SHOW_LOADING_INDICATOR_REQUEST, event);
        alert(
          'show-loading-indicator-request message received: ' +
            JSON.stringify(event.detail.data),
        );
      });

      luigiContainer.addEventListener(Events.HIDE_LOADING_INDICATOR_REQUEST, (event) => {
        console.log(Events.HIDE_LOADING_INDICATOR_REQUEST, event);
        alert(
          'hide-loading-indicator-request message received: ' +
            JSON.stringify(event.detail.data),
        );
      });

      // SET_CURRENT_LOCALE_REQUEST
      luigiContainer.addEventListener(Events.SET_CURRENT_LOCALE_REQUEST, (event) => {
        console.log(Events.SET_CURRENT_LOCALE_REQUEST, event);
        alert(
          Events.SET_CURRENT_LOCALE_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });

      // LOCAL_STORAGE_SET_REQUEST
      luigiContainer.addEventListener(Events.LOCAL_STORAGE_SET_REQUEST, (event) => {
        console.log(Events.LOCAL_STORAGE_SET_REQUEST, event);
        alert(
          Events.LOCAL_STORAGE_SET_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });

      // RUNTIME_ERROR_HANDLING_REQUEST
      luigiContainer.addEventListener(Events.RUNTIME_ERROR_HANDLING_REQUEST, (event) => {
        console.log(Events.RUNTIME_ERROR_HANDLING_REQUEST, event);
        alert(
          Events.RUNTIME_ERROR_HANDLING_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });

      // SET_ANCHOR_LINK_REQUEST
      luigiContainer.addEventListener(Events.SET_ANCHOR_LINK_REQUEST, (event) => {
        console.log(Events.SET_ANCHOR_LINK_REQUEST, event);
        alert(
          Events.SET_ANCHOR_LINK_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });

      // SET_THIRD_PARTY_COOKIES_REQUEST - called on microfrontend startup
      luigiContainer.addEventListener(Events.SET_THIRD_PARTY_COOKIES_REQUEST, (event) => {
        console.log(Events.SET_THIRD_PARTY_COOKIES_REQUEST, event);
        alert(
          Events.SET_THIRD_PARTY_COOKIES_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data.data),
        );
      });

      // BACK_NAVIGATION_REQUEST
      luigiContainer.addEventListener(Events.BACK_NAVIGATION_REQUEST, (event) => {
        console.log(Events.BACK_NAVIGATION_REQUEST, event);
        alert(
          Events.BACK_NAVIGATION_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });

      // GET_CURRENT_ROUTE_REQUEST
      luigiContainer.addEventListener(Events.GET_CURRENT_ROUTE_REQUEST, (event) => {
        console.log(Events.GET_CURRENT_ROUTE_REQUEST, event);
        alert(
          Events.GET_CURRENT_ROUTE_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
        event.callback('/test/route');
      });

      // NAVIGATION_COMPLETED_REPORT
      luigiContainer.addEventListener(Events.NAVIGATION_COMPLETED_REPORT, (event) => {
        console.log(Events.NAVIGATION_COMPLETED_REPORT, event);
        alert(
          Events.NAVIGATION_COMPLETED_REPORT,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });

      // UPDATE_MODAL_PATH_DATA_REQUEST
      luigiContainer.addEventListener(Events.UPDATE_MODAL_PATH_DATA_REQUEST, (event) => {
        console.log(Events.UPDATE_MODAL_PATH_DATA_REQUEST, event);
        alert(
          `LuigiClient.linkManager().updateModalPathInternalNavigation("${event.payload.link}")`,
        );
      });

      // CHECK_PATH_EXISTS_REQUEST
      luigiContainer.addEventListener(Events.CHECK_PATH_EXISTS_REQUEST, (event) => {
        console.log(Events.CHECK_PATH_EXISTS_REQUEST, event);
        alert(
          Events.CHECK_PATH_EXISTS_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
        event.callback(true);
      });

      // SET_DIRTY_STATUS_REQUEST
      luigiContainer.addEventListener(Events.SET_DIRTY_STATUS_REQUEST, (event) => {
        console.log(Events.SET_DIRTY_STATUS_REQUEST, event);
        alert(
          Events.SET_DIRTY_STATUS_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });

      // CLOSE_CURRENT_MODAL_REQUEST
      luigiContainer.addEventListener(Events.CLOSE_CURRENT_MODAL_REQUEST, (event) => {
        console.log(Events.CLOSE_CURRENT_MODAL_REQUEST, event);
        alert(
          Events.CLOSE_CURRENT_MODAL_REQUEST,
          'message received: ' + JSON.stringify(event.detail.data),
        );
      });
    </script>
  </body>
</html>
